/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2022-11-17 16:56:43
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2024-04-16 16:47:27
 */
import { arrTotreeNoPID } from '@/utils/tree';
import { Modal, Transfer, Tree } from 'antd';
import type { ListStyle, TransferDirection } from 'antd/es/transfer';
import type { DataNode } from 'antd/es/tree';
import { useEffect, useState } from 'react';

interface TreeTransferProps {
    isModalOpen: boolean;
    dataSource: any[];
    targetKeys: string[];
    onChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
    onOk: (targetKeys: string[]) => void;
    onCancel: () => void;
}


const TreeTransfer = ({ isModalOpen, dataSource, targetKeys: oldTargetKeys, onCancel, onOk, ...restProps }: TreeTransferProps) => {

    const [targetKeys, setTargetKeys] = useState<string[]>(oldTargetKeys);

    const [leftCheckKeys, setLeftCheckKeys] = useState<string[]>([]);//左侧树复选框选中的数据
    const [rightCheckKeys, setRightCheckKeys] = useState<string[]>([]);//右侧树复选框选中的数据

    useEffect(() => {
        console.log('oldTargetKeys', oldTargetKeys);
        setTargetKeys([...oldTargetKeys])
    }, [oldTargetKeys])



    return (
        <Modal
            open={isModalOpen}
            closable={false}
            destroyOnClose
            onCancel={onCancel}
            onOk={() => {
                onOk(targetKeys)
            }}>
            <Transfer
                {...restProps}
                showSelectAll={true}
                listStyle={(style: ListStyle) => { return { height: '300px' } }}
                locale={{ itemUnit: '项', itemsUnit: '项', selectAll: '全选', selectInvert: '反选' }}
                titles={['未分配', '已分配']}
                targetKeys={targetKeys}
                dataSource={dataSource}
                selectedKeys={[...leftCheckKeys, ...rightCheckKeys]}
                className="tree-transfer"
                render={item => item.title!}
                onChange={(targetKeys, direction, moveKeys) => {
                    setTargetKeys(targetKeys)
                    setLeftCheckKeys([])
                    setRightCheckKeys([])
                }}
                onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
                    setLeftCheckKeys(sourceSelectedKeys);
                    setRightCheckKeys(targetSelectedKeys);
                }}
            >
                {({ direction, onItemSelect, selectedKeys, filteredItems }) => {
                    if (direction === 'left') {
                        return (
                            <Tree<DataNode>
                                blockNode
                                checkable
                                autoExpandParent
                                defaultExpandAll
                                checkedKeys={selectedKeys}
                                onCheck={(checkedKeysValue: any, { checked, node: { key } }) => {
                                    if (checked) {
                                        setLeftCheckKeys(checkedKeysValue);
                                    } else {
                                        setLeftCheckKeys([])
                                    }

                                }}
                                treeData={arrTotreeNoPID(filteredItems, 'key', 'pkFather', 'children')}
                            />
                        );
                    } else if (direction === 'right') {
                        return (
                            <Tree<DataNode>
                                blockNode
                                checkable
                                autoExpandParent
                                defaultExpandAll
                                checkedKeys={selectedKeys}
                                onCheck={(checkedKeysValue: any, { checked, node: { key } }) => {
                                    if (checked) {
                                        setRightCheckKeys(checkedKeysValue);
                                    } else {
                                        setRightCheckKeys([])
                                    }

                                }}
                                treeData={arrTotreeNoPID(filteredItems, 'key', 'pkFather', 'children')}
                            />
                        );
                    }
                }}
            </Transfer>

        </Modal>

    );
};

export default TreeTransfer;